<template>
    <view class="margin-bottom" v-if="AppointmentService.length > 0">
        <swiper class="AppointmentService" next-margin="120rpx" previous-margin="120rpx">
            <swiper-item class="swiper-item" v-for="(item, index) in AppointmentService" :key="item.id">
                <view class="swiper-item-body" :class="{ 'timeout': item.timeout }"
                    @tap="$utils.$page.open('/technician/pages/user/service/details?id=' + item.id)">
                    <view class="flex space-between">
                        <view class="text-sm">用户：{{ item.nickname }}</view>
                        <view class="text-sm">{{ item.title }}</view>
                    </view>
                    <x-countdown class="time" v-if="item.countdown" :time="item.time" :end-text="item.end_text"
                        @end="getList" />
                    <view class="time" v-else>{{ item.time }}</view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            AppointmentService: []
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            if (this.$store.getters.hasLogin) {
                this.$utils.$api.AppointmentService.technician().then(data => {
                    this.initData(data)
                }).catch(() => {
                    this.AppointmentService = [];
                })
            }
        },
        initData(e) {
            let data = [];
            for (let i = 0; i < e.length; i++) {
                let item = e[i];
                const start_time_date = new Date(item.start_time.replace(/-/g, '/'));
                const date = new Date;
                item.timeout = false;
                item.countdown = false;
                switch (item.state) {
                    // 待服务
                    case 1:
                        if (start_time_date < date) {
                            item.timeout = true;
                        }
                        item.time = `${this.getDayName(start_time_date)} ${start_time_date.getHours().toString().padStart(2, '0')}:${start_time_date.getMinutes().toString().padStart(2, '0')}`;
                        break;
                    // 已出发
                    case 2:
                        start_time_date.setMinutes(start_time_date.getMinutes() + item.commuting_duration);
                        item.time = (start_time_date.getTime() - date.getTime()) / 1000;
                        item.countdown = true;
                        item.end_text = '超时一小时以上';
                        if (item.time <= 0) {
                            item.timeout = true;
                        }
                        break;
                    // 已到达
                    case 3:
                        item.time = '已达到';
                        if (item.verification) {
                            item.time = '已到达(已核验)';
                        }
                        break;
                    // 进行中
                    case 4:
                        const service_start_time = new Date(item.service_start_time.replace(/-/g, '/'));
                        const service_end_time = service_start_time;
                        service_end_time.setMinutes(service_end_time.getMinutes() + item.duration);
                        item.time = (service_end_time.getTime() - date.getTime()) / 1000;
                        item.end_text = '服务结束';
                        item.countdown = true;
                        break;
                }
                data.push(item);
            }
            this.AppointmentService = data;
        },
    }
}
</script>

<style lang="scss" scoped>
.AppointmentService {
    height: 160rpx;

    .swiper-item {
        box-sizing: border-box;
        padding: 0 20rpx;
    }

    .swiper-item-body {
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        background: linear-gradient(45deg, #00e3a7, #00aa7f);
        color: #FFFFFF;

        .time {
            flex: 1;
            font-size: 40rpx;
            font-weight: 600;
            padding: 20rpx;
            text-align: center;
        }

        &.timeout {
            background: linear-gradient(45deg, $u-error, $u-error-dark);
        }
    }
}</style>
